<template>
	<view class="fill-width-height pagecontent flex-col" :class="$thatThemeClassName">
		<uv-tabs :list="dateList" lineWidth="30" :lineColor="`url(${lineBg}) 100% 100%`" lineColor="#FFC107" @click="changeDate"></uv-tabs>
		
		<scroll-view 
			v-if="tableDataList.length > 0" 
			class="flex-1 overflow-hidden"
			scroll-y 
			lower-threshold="20" 
			@scrolltolower="handleScroll"
		>
			<uv-cell-group class="cell-group_contant" ref="scrollContainer" >
				<uv-grid :col="colNum" class="fill-width" style="min-height: 20vw;">
					<uv-grid-item 
						v-for="(item,index) in tableDataList" 
						:key="index"
						:customStyle="{ padding: '6px' }"
						@click="viewsDetails(item)"
					 >
						<view class="fill-width imgItemView" style="min-height: 20vw;">
							<uv-image
								:mode="'aspectFit'"
								radius="10"
								width="100%"
								:height="imageHeight"
								:lazy-load="true"
								:observeLazyLoad="true"
								:fade="true"
								:duration="450"
								:showMenuByLongpress="false"
								:src="viewFile(item)"
							>
								<template v-slot:loading>
									<uv-loading-icon color="#999"></uv-loading-icon>
								</template>
							</uv-image>
						</view>
					</uv-grid-item>
				</uv-grid>
				<uv-load-more 
					:status="status" 
					:loading-text="'努力加载中'"
					:loadmore-text="'轻轻上拉'"
					:nomore-text="'实在没有了'"
				/>
			</uv-cell-group>
		</scroll-view>
		<view class="flex-1" v-else>
			<uv-empty 
				mode="search"
				con="https://cdn.uviewui.com/uview/empty/car.png"
			></uv-empty>
		</view>
	</view>
</template>

<script>
	import { search } from '@/api/list/search'
	import { getDateList } from '@/api/common/common'
	import { useCommonStore } from '@/store/common'
	import { clearImageListCache,setImageListCache } from '@/hooks/common'
	const commonStore = useCommonStore()
	export default {
		data() {
			return {
				status: 'loadmore',
				keyword: '',
				tableDataList: [],
				total: 0,
				queryParams: {
					pageNum: 1,
					pageSize: 30,
				},
				lineBg: "",

				current: 0,
				dateList: [
					
				]
			}
		},
		computed: {
			totalPages(){
				return Math.ceil(this.total / (this.queryParams.pageSize || 10)); 
			},
			colNum(){
				return this.$config.searchViewImgColNum || 4
			},
			imageHeight(){
				if(this.$config?.pageGridListImgageHeight?.length > 0){
					return this.$config.pageGridListImgageHeight
				}
				return 240
			},
		},
		methods: {
			async search() {
				this.tableDataList = []
				this.queryParams.pageNum = 1
				await this.getTablePage()
			},
			viewsDetails(item) {
				clearImageListCache()
				let imageList = this.tableDataList.map(item => item?.fileid?.length > 0 ? item.fileid : item.id)
				setImageListCache(imageList)
				const id = item?.fileid?.length > 0 ? item.fileid : item.id
				const encodedId = encodeURIComponent(id);
				this.goToPage('/pages/viewdetail/index?fileId=' + encodedId )
			},
			goToPage(url) {
				uni.navigateTo({
					url: url 
				});
			},
			viewFile(item){
				if(item?.fileid?.length > 0){
					return item?.fileid
				}
				return this.$getPreviewPath(item.id)
			},
			handleScroll(event) {
				const isFlag = this.status !== 'nomore' && this.queryParams.pageNum <= this.totalPages
				if (isFlag) {
					this.queryParams.pageNum++;
					this.getTablePage();
				}
			},
			async getTablePage() {
				this.total = 0
				const queryParams = Object.assign(this.queryParams, {
					searchValue: this.keyword,
					pushDate: this.currentDate
				})
				this.status = 'loading'
				search(queryParams).then(res => {
					this.tableDataList.push(...res.rows)
					this.total = res.total
					if(this.queryParams.pageNum <= this.totalPages){
						this.status = 'loadmore'
					} else {
						this.status = 'nomore'
					}
				})
			},
			changeDate({ index, name}){
				const dateItem = this.dateList[index]
				const date = dateItem.date
				this.currentDate = date
				this.search()
			}
		},
		mounted(){
			clearImageListCache()
		},
		async onLoad() {
			this.keyword = commonStore?.$state?.keyword?.keyword || ''
			const resData = await getDateList()
			this.dateList = resData.data.map(date => {
				const monthDay = date?.split('-').slice(1).join('-') || date;
				return {
					name: monthDay,
					date: date
				}
			})
			if(this.dateList?.length > 0){
				this.currentDate = this.dateList[0].date
			}
			
			this.search()
			this.$bus.$on('searchKeyWord',(keyword) => {
				this.keyword = keyword
				this.search()
			})
		}
	}
</script>

<style lang="scss" scoped>
	:deep(.uni-scroll-view::-webkit-scrollbar) {
	  display: none;
	}
	.search {
		:deep(.uv-search__action--active) {
			padding: 6px;
			border-radius: 5px;
			background: #377ff5;
			color: white;
			margin: 0;
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
		}
		:deep(.uv-search){
			padding: 10px;
		}
		:deep(.uv-search__content) {
			margin: 0;
		}
		:deep(.uv-search__action.uv-search__action--active){
			display: none;
		}
	}
	.cell-group_contant{
		height: 100%;
		:deep(.uv-cell-group__wrapper,.uv-grid) {
			height: 100%;
		}
	}
</style>